<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/homeIndex' }">
        <i class="el-icon-house"></i> 床位管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>床位设置</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <el-col :span="4" class="col-in-page">
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
        <el-radio-button :label="false">展开</el-radio-button>
        <el-radio-button :label="true">收起</el-radio-button>
      </el-radio-group>
      <el-input
        v-model="searchValue"
        class="shorter-input"
        placeholder="搜索区域或房间..."
        prefix-icon="el-icon-search"
      ></el-input>
      <div class="margin-area"></div>
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        :collapse="isCollapse"
      >
        <el-submenu
          :index="area.id+''"
          @click.native="handleClick(area.id)"
          v-for="area in filteredAreaList"
          :key="area.id"
        >
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>{{ area.name }}</span>
          </template>
          <el-menu-item
            :index="room.id+''"
            v-for="room in area.rooms"
            :key="room.id"
            @click.native="selectRoom(room.id)"
          >{{ room.roomnum }}</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>

    <el-col :span="18" class="col-in-page">
      <!-- 放表格数据 -->
      <h3>床位设置</h3>
      <div class="margin-area1"></div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="bednum" label="床位编码" width="180px"></el-table-column>
        <el-table-column prop="bedName" label="床位名称" width="180px"></el-table-column>
        <el-table-column prop="number" label="床位号" width="180px"></el-table-column>
        <el-table-column prop="enable" label="床位状态" width="180px">
          <template slot-scope="scope">
            <span
              :style="{ color: scope.row.enable === 0 ? 'green' : 'red' }"
            >{{ scope.row.enable === 0 ? '空床' : '占用中' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="收费" width="280px">
          <template slot-scope="scope">{{ scope.row.price }}元</template>
        </el-table-column>
        <el-table-column prop="areaName" label="床位区域" width="280px"></el-table-column>
        <el-table-column prop="roomnum" label="床位房间" width="180px"></el-table-column>
        <el-table-column prop="type" label="房间类型" width="180px"></el-table-column>
        <el-table-column prop="createTime" label="记录时间" width="280px"></el-table-column>

        <el-table-column fixed="right" prop="status" label="启用状态" width="120px">
          <template slot-scope="scope">
            <div class="status">
              <span :class="scope.row.status === 0 ? 'dot-disabled' : 'dot-enabled'"></span>
              {{ scope.row.status === 0 ? '已禁用' : '已启用' }}
            </div>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="180px">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" @click="openLookDialog(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>

    <!-- 编辑床位的的弹框 label-width:是label文字占的宽度-->
    <el-dialog title="编辑床位" :visible.sync="lookVisible">
      <el-form>
        <el-row>
          <el-col :span="12">
            <el-form-item label="床位编码" label-width="100px">
              <el-input :value="bed.bednum" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="床位号" label-width="100px">
              <el-input :value="bed.number" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="床位名称" label-width="100px">
              <el-input :value="bed.bedName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="床位价格" label-width="100px">
              <el-input :value="bed.price" disabled>
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="入院区域" label-width="100px">
              <el-input :value="bed.areaName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入院房间" label-width="100px">
              <el-input :value="bed.roomnum" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="房间类型" label-width="100px">
              <el-input :value="bed.type" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="床位状态" label-width="100px">
              <el-input :value="getBedStatus(bed.enable)" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-form-item label="启用状态" label-width="100px">
            <el-radio-group v-model="bed.status">
              <el-radio label="1">启用</el-radio>
              <el-radio label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setBedStatus">保存</el-button>
        <el-button @click="lookVisible=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      isCollapse: false,
      areaList: [],
      tableData: [],
      searchValue: "",
      lookVisible: false,
      bed: {}
    };
  },
  methods: {
    getBedStatus(status) {
      return status === 1 ? "占用中" : "空房";
    },
    handleClick(index) {
      if (this.isCollapse) {
        // 如果菜单是收起状态，先展开
        this.isCollapse = false;
      }
    },
    handleOpen(key) {
      this.queryByAreaId(key);
    },
    queryAllArea() {
      this.$axios.get("api/bed/queryAllArea").then(res => {
        if (res.data.code == 200) {
          // 初始每个区域的rooms为空
          this.areaList = res.data.data.map(area => ({ ...area, rooms: [] }));
        }
        // 如果区域列表不为空，我们就加载第一个区域的房间列表.
        if (this.areaList.length > 0) {
          this.queryByAreaId(this.areaList[0].id).then(() => {
            // 如果这个区域有房间，我们显示第一个房间的信息
            if (this.areaList[0].rooms.length > 0) {
              this.selectRoom(this.areaList[0].rooms[0].id);
            }
          });
        }
      });
    },
    queryByAreaId(areaId) {
      return this.$axios.get(`api/bed/queryByAreaId/${areaId}`).then(res => {
        if (res.data.code == 200) {
          // 找到对应区域，更新其rooms字段
          const area = this.areaList.find(area => area.id == areaId);
          if (area) {
            area.rooms = res.data.data;
          }
        }
      });
    },
    selectRoom(val) {
      this.$axios.get("api/bed/queryBedByRoomId/" + val).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data;
        }
      });
    },
    //查看展示编辑床位信息
    openLookDialog(val) {
      this.$axios.get("api/bed/queryBedDetail/" + val).then(res => {
        if (res.data.code == 200) {
          this.bed = res.data.data;
          this.bed.status = this.bed.status.toString(); // 转换 bed.status 为字符串
        }
      });
      this.lookVisible = true; // 打开弹窗
    },
    setBedStatus() {
      this.$confirm("确认更改状态吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios.post("api/bed/setBedStatus", this.bed).then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "更改成功!"
              });
              this.lookVisible = false;
              this.selectRoom(this.bed.roomid);
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {});
    }
  },
  created() {
    this.queryAllArea();
  },
  computed: {
    // 新增的计算属性
    filteredAreaList() {
      if (!this.searchValue) return this.areaList;
      // 当用户开始搜索时加载所有区域的房间数据
      this.areaList.forEach(area => {
        if (area.rooms.length === 0) {
          // 如果还没有加载过，就进行加载
          this.queryByAreaId(area.id);
        }
      });
      // 其余部分保持不变 如下是未改动部分的代码
      return this.areaList.filter(area => {
        return (
          area.name.includes(this.searchValue) ||
          area.rooms.some(room => room.roomnum.includes(this.searchValue))
        );
      });
    }
  }
};
</script>
  
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 300px;
}
.margin-area {
  margin-bottom: 20px; /* 您可以根据需求调整这个值 */
}
.margin-area1 {
  margin-bottom: 45px; /* 您可以根据需求调整这个值 */
}
.shorter-input .el-input__inner {
  width: 180px !important; /* 您可以根据需求调整这个值 */
}
.status {
  position: relative;
  padding-left: 20px;
}
.status .dot-enabled,
.status .dot-disabled {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status .dot-enabled {
  background: green;
}

.status .dot-disabled {
  background: red;
}
.el-form-item {
  margin: 10px 50px;
}
.col-in-page {
  margin: 1rem;
  padding: 2.5rem;
  background: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
</style>